<template>
  <div>
    <div class="title">{{isRegister?'注册':'登陆'}}</div>
    <div class="register" v-if="isRegister">
      <x-input title="手机号" v-model="phone" type='tel' is-type="china-mobile" :max='11' required placeholder='请输入手机号'></x-input>
      <x-input title="密码" label-width='4em' type='password' v-model="pwd" required placeholder='请输入密码'></x-input>
      <div class="code">
        <x-input class="codeInput" title="验证码" v-model="code" :max='4' required placeholder='请输入验证码'></x-input>
        <span class="verifycode">{{verify}}</span>
      </div>
    </div>
    <div class="login" v-else>
      <x-input title="用户" label-width='4em' type='tel' is-type="china-mobile" :max='11' required v-model="username" placeholder='请输入手机号'></x-input>
      <x-input title="密码" label-width='4em' type='password' v-model="pwd" required placeholder='请输入密码'></x-input>
      <div class="code">
        <x-input class="codeInput" title="验证码" :is-type="verifyCode" v-model="code" :max='4' placeholder='请输入验证码'></x-input>
        <span class="verifycode" @click='createCode'>{{codeTips}}</span>
      </div>
    </div>
    <x-button class='loginBtn' type="warn" @click.native='submit'>{{isRegister?'注册':'登陆'}}</x-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRegister: false, //是否是注册 
      username: '',     //用户名
      pwd: '',          //密码
      phone: '',        //电话号码
      code: '',         //输入验证码
      codeTips: '',      //提示验证码
    }
  },
  methods: {
    //登陆注册提交
    submit() {
      console.log(this.$data);
      const data = {
        username: this.username,
        password: this.pwd,
        phone: this.phone,
      }
      if (this.code.toLowerCase() == this.codeTips.toLowerCase()) {
        if (this.isRegister) {

        } else {
          sessionStorage.setItem('username', this.username);
          if (sessionStorage.getItem('beforeUrl')) {
            this.$router.push(sessionStorage.getItem('beforeUrl'))
          } else {
            this.$router.push('/')
          }
        }
      } else {

      }
    },
    //生成验证码
    createCode() {
      let code = '';
      const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; //字母库
      for (let i = 0; i < 4; i++) {
        code = code + str[Math.round(Math.random() * (str.length - 1))]; //随机获取四个字母
      }
      this.codeTips = code;
      this.code = '';
    },
    //验证码校验
    verifyCode(e) {
      console.log(e)
      if (e.toLowerCase() == this.codeTips.toLowerCase()) {
        return { valid: true }
      } else {
        return { valid: false, msg: '验证码输入有误' }
      }
    }
  },
  mounted() {
    // console.log(this.$route)
    this.createCode();
  },
  beforeMount() {
    console.log(this, this.$route);
    if (this.$route.query.register) {
      this.isRegister = true;
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  font-size: 18px;
  margin: 20px 0;
}

.weui-label {
  width: 4em !important;
}

.code {
  overflow: hidden;
  .codeInput {
    float: left;
    width: 60%;
  }
  .verifycode {
    width: 3.5em;
    text-align: center;
    border: 1px solid #e63010;
    border-radius: 3px;
    color: #e63010;
    padding: 2px 8px;
    font-size: 20px;
    float: right;
    box-sizing: border-box;
    margin-right: 10px;
    margin-top: 4px;
  }
}
.loginBtn {
  margin-top: 20px;
  font-size: 16px;
}
</style>
